<template>
  <div @click='jumpToKLine(item)'>
    <div v-bind:class='isTop(index)'>
      <div class='itemName'>
        <div class='item_name_one'>
          <div class='item_stockname'>{{item.stockName}} </div>
    	    <div class='item_stockcode'>{{item.STOCK_CODE}}</div>
        </div>
      </div>
      <div class='itemNum'>
        {{item.NUM_SIMILAR}}个
      </div>
      <div class='itemSimlarName'>
      	<div class='item_name_one'>
          <div class='item_stockname'>{{item.TOP_STOCK_NAME}} </div>
    	    <div class='item_stockcode'>{{item.TOP_STOCK_CODE}}</div>
        </div>
        <!--<lineDiv v-if='showChart' :kline='item' :index='index' ></lineDiv>
        <div v-else>暂无数据</div>-->
      </div>
      <div>
      	<img src='~assets/images/right_arrow.png' class='right_arrow'/>
      </div>
    </div>
  </div>
</template>

<script>
import lineDiv from './lineDiv'
import CommonUtil from '@/common/common.util'
export default{
  props: {
    item: Object,
    index: Number
  },
  components: {
    lineDiv
  },
  computed: {
    showChart () {
      if (this.item.UP_NUM === undefined || this.item.UP_NUM === null) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    jumpToKLine (item) {
      let myuserCode = CommonUtil.getUrlParam('userCode') || ''
      // 埋点
      let TDAPP = window.TDAPP
      TDAPP.onEvent('004002', '', {userCode: myuserCode, stockCode: item.stockCode})
      TDAPP.send()
      this.$router.push({path: '/stock', query: {stockCode: item.marketType + item.stockCode, stockName: item.stockName, similarNum: item.NUM_SIMILAR, upNum: item.UP_NUM, downNum: item.DOWN_NUM, userCode: myuserCode}})
    },
    isTop (index) {
      return {
        position_item: true,
        border: index !== 0
      }
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.position_item{
	display: flex;
	align-items:center;
	font-size:32px;
	height:120px;	
  margin: auto 28px 0 28px;
  .itemName{
	  flex:1.8;
	  display: flex;
  }
}
.border{
	border-top: solid 1px #eaeaea;
}
.position_item .itemName  .item_name_one {
  .item_stockcode{
  	text-align: left;
  }
}
.position_item  .item_name_one {
  .item_stockcode{
	  font-size:24px;
  	color:rgb(153,153,153);
  }
}
.position_item .itemNum{
	flex:5;
	font-size:28px;
}
.right_arrow{
	width:45px;
	margin-top:5px;
/*	margin-left:6px;*/
}
.position_item .itemSimlarName{
	flex:1.8;
	text-align: left;
	color:#555555;
}
</style>
